<template>
  <div class="JJTagBar">
    <div v-for="tag in store.state.navbar.tags" :key="tag.path" class="TagBox" @contextmenu.prevent="openMenuHandle($event, tag)">
      <el-tag
        :type="tag.path === $route.path ? 'primary' : 'info'"
        size="small"
        disable-transitions
        :closable="tag.closable"
        @click="clickHandle(tag.path)"
        @close="closeHandle(tag.path)"
      >
        {{ tag.name }}
      </el-tag>
    </div>

    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="TagMenu" ref="menuRef">
      <li :class="{ disable: selectedUnClosable }" @click="closeSelectTagHandle">Close</li>
      <li @click="closeOtherTagHandle">Close Others</li>
      <li :class="{ disable: selectedUnClosable }" @click="closeAllTagHandle">Close All</li>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import store from '../store'

export default defineComponent({
  name: 'JJTagBar',
  data() {
    return { store, visible: false, top: 0, left: 0, selectPath: '', selectedUnClosable: false }
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenuHandle)
      } else {
        document.body.removeEventListener('click', this.closeMenuHandle)
      }
    }
  },
  methods: {
    clickHandle(path) {
      if (this.$route.path !== path) this.$router.push(path)
    },
    closeHandle(path) {
      this.closeMenuHandle()
      store.commit('delTag', path)
    },
    openMenuHandle(event, tag) {
      const patchGap = 8

      this.visible = true
      this.selectPath = tag.path
      this.selectedUnClosable = !tag.closable

      setTimeout(() => {
        const isOverflow = event.pageX + this.$refs.menuRef.clientWidth + patchGap > window.innerWidth

        this.top = event.pageY
        this.left = isOverflow ? event.pageX - this.$refs.menuRef.clientWidth : event.pageX
      }, 0)
    },
    closeMenuHandle() {
      this.visible = false
    },
    closeSelectTagHandle() {
      if (!this.selectedUnClosable) this.closeHandle(this.selectPath)
    },
    closeOtherTagHandle() {
      store.commit('delOtherTag', this.selectPath)
    },
    closeAllTagHandle() {
      if (!this.selectedUnClosable) store.commit('delOtherTag', '/')
    }
  }
})
</script>

<style lang="scss">
.JJTagBar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: calc(var(--u-gap) * 0.5) 0;
  box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px;

  .TagBox {
    .el-tag {
      border-radius: 0;
      user-select: none;
      cursor: pointer;
    }

    &:first-child {
      margin: 0 var(--u-gap);
    }

    &:not(:first-child) {
      margin-right: var(--u-gap);
    }
  }

  .TagMenu {
    position: absolute;
    margin: 0;
    padding: 0;
    background-color: var(--c-bg);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    z-index: 1;

    li {
      list-style: none;
      padding: calc(var(--u-gap) * 0.5) calc(var(--u-gap) * 1.5);
      font-size: 14.5px;
      word-break: keep-all;
      white-space: nowrap;
      cursor: pointer;

      &.disable {
        color: var(--c-text-3);
        cursor: not-allowed;
      }

      &:not(.disable):hover {
        background-color: #ecf5ff;
        color: #66b1ff;
      }
    }
  }
}
</style>
